<template>
  <div>
    <!-- <div style="background-color: #dddddd;color:;height: 30px;line-height: 30px;" v-if="name === 'Dashboard'">设备列表</div> -->
    <el-input size="small" style="width: 100%;margin-bottom:15px" placeholder="请输入" prefix-icon="el-icon-search"
      v-model="keyWord" @input="handleSearchInput" />
    <!-- <el-tree :data="treeList"  :show-checkbox="showCheckBox" default-expand-all :accordion='true'
      :expand-on-click-node="true" node-key="id" ref="tree" :props="defaultProps" @current-change="handleCheckChange"
      :filter-node-method="fliterNode" empty-text="暂无数据" :render-content="renderContent" style="height: 100%;">
    </el-tree> -->
    <el-tree lazy :load="lazyLoad" node-key="id" ref="tree" :render-content="renderContent"
      :default-expanded-keys="expanded" accordion :filter-node-method="fliterNode" :props="defaultProps"
      @current-change="handleCurrentChange" style="height: 100%;" icon-class=" ">

    </el-tree>
  </div>
</template>

<script>
import axios from "axios";
import { findMarkerById, moveMapToMarker } from '../../utils/map/index'
import { listUser, } from "../../api/system/user";
import { NewdeptTreeSelect, listDevice } from '../../api/system/device'
export default {
  components: {

  },
  props: {
    // showCheckbox: {
    //   type: Boolean,
    //   default: false,//是否可以勾选
    // },


  },

  mounted() {



  },
  watch: {

  },
  methods: {

    handleSearchInput(keyWord) {
      this.$refs.tree.filter(keyWord)
    },

    fliterNode(v, d) {
      if (!v) return true;
      // console.log(v, d)
      return d.label.indexOf(v) !== -1
    },
    renderContent(h, { node, data }) {
      let iconClass = ['el-tree', 'el-tree-node__expand-icon']

      if (data.devId) {
        // console.log('slelect device ', node)
        iconClass.push('el-icon-cpu', 'dev', data.flag == '在线' ? 'on' : 'off')
        // console.log(data, iconClass)
      } else if (node.childNodes.length) {
        iconClass.push('el-icon-caret-right');
        if (node.expanded) iconClass.push('expanded')
      } else {
        iconClass.push('el-icon-caret-right', 'is-leaf')
      }
      let icon = h('span', { class: iconClass });
      let label = h('span', { class: ['tree-label'] }, data.label)
      return h('span', [icon, label]);
    },
    lazyLoad(e, resolve) {
      if (e.level === 0) {
        NewdeptTreeSelect().then((res) => {
          resolve(res.data)
          this.expanded = [res.data[0].id]
          return
        })
      }
      if (e.level > 0) {
        if (e.data.children) {
          return resolve(e.data.children)
        } else {
          listDevice({ status: 3, deptId: e.data.id }).then((res) => {
            let devList = []
            if (res.total) {
              devList = res.rows.map(item => ({
                id: item.deviceId,
                label: item.deviceName,
                flag: item.statusLable,
                devId: item.deviceId //通过listDevice接口获取数据后向节点添加设备id用于判断是否为设备
              }))

            }
            return resolve(devList)
          })
        }
      }
    },
    handleCurrentChange(data, node) {
      if (data.devId) {
        // 如果点击节点为设备
        this.$emit('deviceSelect', data)
      } else {
        //节点点击
        this.$emit('projectSelect', data, !node.expanded)
      }
    }

  },

    data() {
      return {
        keyWord: "",//搜索关键字
        // selectedNodeId: null,
        treeList: [],
        defaultProps: {
          children: "children",
          label: "label",
        },
        expanded: [],
        // color: null,
        list: [],
        // loadingNodeId: null
      };
    },
  };
</script>
<style>
/* // 树形列表 */
.el-tree .el-tree-node__content {
  font-size: 14px;

}

.tree-label {
  font-size: 14px;
  margin-left: 8px;
}

.dev {
  color: #fff;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;

}

.on {
  background-color: #67C23A;
}

.off {
  background-color: #909399;
  ;
  /* background-color: #F56C6C; */

}

/* //有子节点 且未展开 */
.el-tree .el-icon-caret-right:before {
  color: #409EFF;
  /* border: 1px solid #1890ff; */
  background-color: #fff;
  padding: 1px;

}

/* //有子节点 且已展开 */
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  color: #F5F7FA;
  background-color: #409EFF;
  padding: 2px;
  font-size: 14px;
}

/* //没有子节点 */
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  color: #909399;

}
</style>
